<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-07 15:46:30
 * @LastEditTime: 2024-03-06 14:17:14
 * @FilePath: \env-manager-pc\src\views\assets\order\edit.vue
-->
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { rules, useInitForm } from './page'
import { useAssetModels } from '@/utils/dataHook'
import { ModelType } from '@/types/common'
import type { ModelOpen } from '@/types/page'

const emits = defineEmits(['submit'])

const dialogVisible = ref(false)
const { formData, initForm } = useInitForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const AssetModels = useAssetModels()
const modelType = ref(ModelType.add)

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    const { AssetCodeYear } = options.data
    formData.value = { ...options.data, AssetCodeYear: AssetCodeYear ? String(AssetCodeYear) : '' }
  }
  dialogVisible.value = true
}

const AssetCodeSNEnd = computed({
  get: () => {
    return (formData.value.AssetCodeSNEnd || 0) - (formData.value.AssetCodeSNStart || 0) + 1
  },
  set: (value) => {
    formData.value.AssetCodeSNEnd = formData.value.AssetCodeSNStart + Number(value || 0) - 1
  },
})

const title = computed(() => {
  return formData.value.ObjID ? '编辑订单' : '新增订单'
})

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', { ...formData.value, AssetCodeYear: Number(formData.value.AssetCodeYear) }, doLoading)
    }
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <ElForm ref="formRef" label-width="180px" label-position="top" label-suffix="：" :model="formData" :rules="rules">
      <ElRow :gutter="30">
        <ElCol :span="12">
          <ElFormItem label="订单日期" prop="PlaceDate">
            <el-date-picker
              v-model="formData.PlaceDate"
              class="w-full!"
              type="date"
              placeholder="订单日期"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="型号" prop="AssetModelObjID">
            <ElSelect v-model="formData.AssetModelObjID" class="w-full" clearable>
              <ElOption v-for="item in AssetModels" :key="item.ObjID" :label="item.Name" :value="item.ObjID" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="年份" prop="AssetCodeYear">
            <el-date-picker
              v-model="formData.AssetCodeYear"
              type="year"
              placeholder="请选择年份"
              value-format="YYYY"
              class="w-full!"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="批次" prop="AssetCodeBatch">
            <ElInputNumber v-model="formData.AssetCodeBatch" class="w-full" :controls="false" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="起始序列号" prop="AssetCodeSNStart">
            <ElInputNumber v-model="formData.AssetCodeSNStart" class="w-full" :controls="false" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="数量" prop="AssetCodeSNEnd">
            <ElInputNumber v-model="AssetCodeSNEnd" class="w-full" :controls="false" :precision="0" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="收货地点" prop="RecAddress">
            <ElInput v-model="formData.RecAddress" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="约定发货日期" prop="StipulateDate">
            <el-date-picker
              v-model="formData.StipulateDate"
              class="w-full!"
              type="date"
              placeholder="约定发货日期"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="联系人" prop="Recipient">
            <ElInput v-model="formData.Recipient" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="联系电话" prop="RecipientTel">
            <ElInput v-model="formData.RecipientTel" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="备注" prop="Remark">
            <ElInput v-model="formData.Remark" type="textarea" />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
